<script>
import WithDialog from '@/components/WithDialog/withDialog'
import Editor from './index'

import { delRoleMenbers } from '@/api/v2/role'
export default {
    components:{
        WithDialog,
        Editor
    },
    emits:['update:visible'],
    props:{
        roleID:{
            type:Number
        },
        fetchRoleMembersFn:{
            type:Function
        },
        visible:{
            type:Boolean,
            required:true,
            default:false
        },
        saveFn:{
            type:Function
        },
    },
    computed:{
        isReady(){
            return this.visible && (typeof this.roleID === 'number' && !isNaN(this.roleID))
        },
        attrs(){
            const attrs = {...this.$attrs }

            attrs['loading'] = this.loading
            attrs['disabled'] = this.isSubmitting

            return attrs
        },
        dialogVisible:{
            get(){
                return this.visible
            },
            set(v){
                this.$emit('update:visible',v)
            }
        }
    },
    watch:{
        isReady:{
            handler(v){
                if(!v)return
                this.fetchMembers()
            },
            immediate:true
        }
    },
    data(){
        return {
            loading:false,
            isSubmitting:false,
            addRoleUser:[]
        }
    },
    methods:{
        async submit(){
            try {
                this.isSubmitting = true
                if ( this.addRoleUser.length<=0) return this.dialogVisible = false
                const result = await this.saveFn(this.roleID, this.addRoleUser)
                    .catch(e => {
                        throw new Error(e?.response?.data?.message ?? '保存失败')
                    })

                if(result?.code !== 200)
                    throw new Error(result.message ?? '保存失败')
                this.dialogVisible = false
                this.$message.success('保存成功')
            }catch(e){
                this.$message.error(`保存失败：${e.message}`)
            }finally{
                this.isSubmitting = false
            }
        },
        async fetchMembers(){
            try {
                this.loading = true
                await this.fetchRoleMembersFn(this.roleID)
                this.loading = false
            }catch(e){
                this.loading = false
                console.log(e)
            }
        },
        changeRoleUser(val){
            this.addRoleUser=val
        },
        handleCancel(){
            this.dialogVisible = false
            this.$refs.editorRef.addRoleUser=[]
        },
        async changeDelRoleUser(id){
            try {
                const params={
                    roleId:this.roleID,
                    userIds:JSON.stringify([`${id}`])
                }
                await delRoleMenbers(params)
                this.$message.success('删除成功')
            } catch (error) {
                this.$message.error('删除失败')
            }
        }
    }
}
</script>

<template>
    <WithDialog
        title="角色成员编辑"
        width="30%"
        confirmText="保存"
        :visible.sync="dialogVisible"
        :confirmBtnDisabled="attrs.disabled"
        :confirmBtnLoading="isSubmitting"
        :cancelBtnDisabled="attrs.disabled"
        @confirm="submit"
        @cancel="handleCancel"
    >
        <Editor
        ref="editorRef"
            v-bind="attrs"
            v-on="$listeners"
            @onRoleUser="changeRoleUser"
            @onDelRole="changeDelRoleUser"
        />
    </WithDialog>
</template>

<style lang="scss">
</style>
